<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en" class="no-js">
<% 
  String path=request.getContextPath();
%>
<head>

<meta charset="utf-8">
<title>注册</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- CSS -->

<link rel="stylesheet" href="<%=path%>/static/css/333.css">
<link rel="stylesheet" href="<%=path%>/static/css/222.css">
<link href="<%=path%>/static/css/111.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="<%=path%>/static/js/111.js"></script>
<![endif]-->
<script src="<%=path%>/static/js/333.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/222.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/888.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/444.js"></script>
</head>

<body>
<img style="width: 100%;height: 750px;" src="<%=path%>/static/images/backgrounds/7deb02a9194a4960a987df915ac1186e.jpeg">
<div class="page-container">
  <div class="main_box">
    <div class="login_box">
      <div class="login_logo">
       <%--  <img src="<%=path%>/static/images/logo.png" > --%>
      </div>
    
      <div class="login_form" >
        <form id="subFrom" action="<%=request.getContextPath() %>/UserinfoServlet?action=register" id="myfrom" method="post">
          <div class="form-group" >
            <label for="j_username" class="t" name="Username">账  号：</label> 
            <input id="username" size=14  value="" name="username" type="text" 
            autocomplete="off"><span style="font-size:1px; color: red;" id="usernameMsg" ></span>
          </div>
          <div class="form-group">
            <label for="j_password" class="t" name="password">密　码：</label> 
            <input id="password" size=14 value="" name="password" type="password" 
            > <span style="font-size:1px; color: red;" id="passwordMsg"></span>
          </div>
         <div class="form-group">
            <label for="j_password" class="t" name="passwordAck">确  认  密  码：</label> 
            <input id="passwordAck" size=14 value="" name="passwordAck" type="password" 
            > <span style="font-size:1px; color: red;" id="passwordAckMsg"></span>
          </div>
          <div class="form-group">
            <label for="j_captcha" class="t">验证码：</label>
             <input id="code" name="code" type="text" size=5>
            <img id="codeImg" alt="点击更换" title="点击更换" src="<%=request.getContextPath() %>/CodeServlets?action=code" class="m">
             <span style="font-size:1px; color: red;" id="codeMsg"></span>
          </div>
          
          <div class="form-group space">
            <label class="t"></label>　　　
            <button type="button"  id="subtn" 
            class="btn btn-primary btn-lg">&nbsp;注&nbsp;册&nbsp </button>
            <input id="login" type="button" value="&nbsp;登&nbsp;录&nbsp;" class="btn btn-default btn-lg">
          </div>
        </form>
      </div>
    </div>
    
  </div>
</div>

<!-- Javascript -->

<script src="<%=path%>/static/js/666.js"></script>
<script src="<%=path%>/static/js/777.js"></script>
<script src="<%=path%>/static/js/555.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/jquery-3.5.1.min.js"></script>
<script>
//加载网页执行方法
$(function(){

	$("#login").click(function(){
		window.location.href="<%=request.getContextPath()%>/login.jsp";
	})
	
	//用户名失去焦点检查是否可用
	$("#username").blur(function(){
		var username = $.trim($(this).val());//去掉空格
		$.ajax({			   
			   url: "<%=path%>/CodeServlets?action=checkUsername",
			   data: {username:username},
			   success: function(msg){
			    //1可用0不可用
			    if(msg=="1")
			    {
			     $("#usernameMsg").html("");
			    }
			    else
			    {
			    	$("#usernameMsg").html("用户名已经存在");
			    	$("#username").select();
			    }
			   }
			});

		
	});
	//给注册添加点击事件 
	$("#subtn").click(function(){
		
		//验证用户名开始
		var username=$("#username").val();
		var usernameRe=/^\w{4,20}$/;
		if(!usernameRe.test(username))
			{
			
			$("#usernameMsg").html("账号只能为数字、字母、下划线,长度在4~20之间");
			$("#username").select();
			return;
			}
		else
			{
			
			$("#usernameMsg").empty();
			}//验证用户名结束
		
		//验证密码开始
		var password=$("#password").val();
		
		if(password.length<6)
			{
			
			$("#passwordMsg").html("密码长度不得少于6位");
			$("#password").select();
			return;
			}
		else
			{
			
			$("#passwordMsg").empty();
			}//验证密码结束
		
		//验证确认密码开始
		var passwordAck=$("#passwordAck").val();
		if(passwordAck!=password)
			{
			$("#passwordAckMsg").html("两次密码不一致");
			$("#passwordAck").select();
			return;
			}
		else
			{
			$("#passwordAckMsg").empty();
			}//验证确认密码结束
		
			//验证验证码开始 ajax
		  var code=$("#code").val();
		  $.ajax({
			  url:"<%=request.getContextPath()%>/CodeServlets?action=check",
			  //type:"GET",
		      data:"code="+code,
		   success:function(data)
		   {
			  
			  if(data=="ok")
				  {
				  $("#codeMsg").html("");
				  $("#subFrom").submit(); 	
				  }
			  else
				  {
				  $("#codeMsg").html("验证码失败");
				  $("#code").select();
				  }
			  
		   }
		  
		  })//验证验证码结束 ajax
		
		  
	})	
	
		  //换验证码图片开始
		   $("#codeImg").click(function(){
			  var rand=Math.random();
			  $(this).attr("src","<%=request.getContextPath() %>/CodeServlets?action=code&rand="+rand);
		   })
		  //换验证码图片结束
})

</script>


</body>
</html>


